<template>
	<view class="cent">
		<div class="head">
			<div class="info" v-if="isLoing">
				<image :src="userInfo.avatarUrl" mode=""></image>
				<span>{{userInfo.nickName}}</span>
			</div>

			<button class="login" v-if="!isLoing" @tap="login" open-type="getUserInfo" @bindgetuserinfo="login">授权登录</button>

			<!-- <button class="login" @tap="login">授权登录</button> -->
		</div>

		<div class="orde">
			<div class="title" @tap='navigatorFn(0)'>
					<span>所有订单</span>
					<van-icon name="arrow" />
			</div>
			<div class="tongji">
				<div @tap='navigatorFn(0)'>
						<i class="iconfont icontubiaozhizuomoban-9"></i>
						<div>进行中<span class="tag">99</span></div>
				</div>
				<div @tap='navigatorFn(0)'>
						<i class="iconfont icontubiaozhizuomoban-10"></i>
						<div>已完成</div>
				</div>
				<div @tap='navigatorFn(0)'>
						<i class="iconfont icontubiaozhizuomoban-16"></i>
						<div>取消</div>
				</div>
			</div>
		</div>

		<div class="phone" @tap="phone">
			<i class="iconfont icontubiaozhizuomoban-12"></i>
			<span>{{userInfo.maintel || '18507550715'}}</span>
		</div>

		<quick />
	</view>
</template>

<script>
	import quick from '@/components/quick/index.vue'
	export default {
		components: {
			quick
		},
		data() {
			return {
				isLoing: false,
				canIUse: wx.canIUse('button.open-type.getUserInfo'),
				userInfo:{}
			};
		},
		onShareAppMessage: function () {
			let path = getCurrentPages().route
		    return {
		        title: '弹出分享时显示的分享标题',
		        desc: '分享页面的内容',
		        path: `${path}?maincode=${userInfo.maincode}&maintel=${userInfo.maintel}`, // 路径，传递参数到指定页面。
				imageUrl:'@/static/bg.jpg'
		    }
		},
		onLoad: function() {

			let userInfo = uni.getStorageSync('userInfo')
			if(userInfo){
				this.userInfo = userInfo
				this.isLoing = true
			}

		},
		methods: {
			phone() {
				wx.makePhoneCall({
					phoneNumber: this.userInfo.maintel || '18507550715' 
				})
			},
			login() {
				let _this = this
				wx.login({
					success(res) {
						if (res.code) {
							let code = res.code
							wx.getUserInfo({
								success(res) {
									var encryptedData = encodeURI(res.encryptedData);
									_this.thirdLogin(encodeURI(code), encryptedData, encodeURI(res.iv)); //调用服务器api
								},
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			thirdLogin(Code, encryptedData, iv) {
				let _this = this
				const params = {
					Code,
					encryptedData,
					iv,
					maincode:uni.getStorageSync('maincode')
				}
				this.$api('api/wx/getWxLogin.html', params).then(res => {
					uni.setStorageSync('userInfo',res)
					this.userInfo = res
					this.isLoing = true
				}).catch(res=>{
					console.log(res)
				})
			},
			navigatorFn(index){
				if(this.isLoing){
					uni.navigateTo({
						url:'./order?active='+index
					})
				}else{
					uni.showToast({
					    title: '请先登录',
					    duration: 2000,
						icon:'none'
					});
				}
				
			}
		},
	}
</script>

<style lang="less">
	.cent {
		background: url(../../static/bg.jpg) no-repeat top;
		background-size: 100% 331rpx;
		min-height: 100vh;

		.head {
			height: 258rpx;
			text-align: center;
			width: 100%;
			display: inline-block;

			.login {
				margin-top: 160rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				width: 220rpx;
				background: none;
			}

			.info {
				padding-top: 36rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border: 2rpx solid #fff;
					border-radius: 100%;
					background: #fff;
				}

				span {
					display: block;
					color: #fff;
					margin-top: 20rpx;
				}
			}
		}

		.orde {
			margin: 0 auto;
			width: 560rpx;
			box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.2);
			border-radius: 30rpx;
			background: #fff;
			padding: 0 25rpx;

			.title {
				line-height: 80rpx;
				color: #666;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
				display: flex;
				justify-content: space-between;
				
			}

			.tongji {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-around;

				>div {
					text-align: center;

					.iconfont {
						color: #005BAC;
						font-size: 80rpx;
						margin-bottom: 10rpx;
					}

					div {
						color: #000;
						position: relative;

						.tag {
							position: absolute;
							min-width: 22rpx;
							height: 22rpx;
							border-radius: 22rpx;
							text-align: center;
							font-size: 16rpx;
							background: #D40000;
							color: #fff;
						}
					}
				}
			}
		}
	}

	.phone {
		margin: 30rpx auto 0;
		width: 560rpx;
		box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.2);
		border-radius: 30rpx;
		background: #fff;
		padding: 0 25rpx;
		line-height: 116rpx;
		padding-left: 70rpx;

		.iconfont {
			color: #005BAC;
			font-size: 80rpx;
			margin-bottom: 10rpx;
			display: inline-block;
			vertical-align: middle;
		}

		span {
			display: inline-block;
			font-size: 30rpx;
			color: #666;
			margin-left: 60rpx;
		}
	}
</style>
